<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
    <div class="min-h-screen bg-[#d9eee3] box pb-10">
      <!-- 顶部Logo -->
      <Header />
      <!-- 主卡片容器 -->
      <div class="bg-white rounded-xl shadow-lg p-6 mx-auto w-95/100 mt-8">
        <div class="font-bold mb-4" style="font-size: 26px">
            <span class="text-3xl  mb-6">Let’s Confirm Your Coverage for Advanced UTI Testing</span>
        </div>
        <div class="mb-6 ">
          <span class="text-lg leading-none">We want to make the billing process seamless for you. While many insurance plans cover our advanced UTI testing, some may not.</span>
        </div>
        <img :src="compony" alt="">
        <!-- 订单信息 -->
        <div class="mb-8">
          <!-- <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-medium">您的订单</h2>
            <button class="text-[#2D6E74]">编辑</button>
          </div> -->
          <div class="mb-6 mt-6">
            <span class="text-lg font-bold mr-3 underline">If your provider is listed here,</span>
            <span class="text-lg font-bold"> you still have options!</span>
          </div>
          <div>
            <p class="text-lg mb-6 leading-none">
                If your plan is listed, you can still move forward with testing through our self-pay option. After payment, you may be able to seek reimbursement directly from your insurance provider by submitting:

            </p>
            <p class="mb-6 text-lg font-bold">
                ✔ Your payment receipt

            </p>
            <p class="mb-6 text-lg leading-none">
                <span class="font-bold">✔ A superbill,</span>
                 which provides detailed information your insurer may require for reimbursement
                <a href="https://www.myuti.com/billing" class="text-[#0033FF]" >(Learn More)</a>
            </p>
            <p class="text-lg leading-none">
                We encourage you to check with your insurance provider for their specific reimbursement policies.

            </p>
          </div>
          <p class="font-bold text-2xl mt-5 mt-4 ">
            Help Us Improve Coverage Options
          </p>
          <p class="leading-none mb-5 mt-5">
            If your insurance provider does not accept billing for our services, we’d love to hear from you. Share your insurance details below so 
            we can continue working toward broader coverage options in the future.
          </p>
          <div>
            <!-- <el-input
                type="text"
                placeholder="Name of insurance provider"
                class="w-full p-4 rounded-lg  focus:border-[#2D6E74] outline-none mt-5 mb-5"
            /> -->
            <el-input
                v-model="paymentInfo.qInsurerResponse"
                type="text"
                placeholder="Name of insurance provider"
                class="h-[50px] w-full mt-5"
            />
          </div>

        </div>

        <!-- 提交按钮 -->
        <div class=" mt-8 ">
          <button
            
            @click="handleSubmit"
            class="!curson-point  selfPay w-[239px] h-[60px]  bg-[#477577] text-white py-3 !rounded-button  transition-colors duration-200 rounded-[30px]"
          >
              Continue to Self Pay
          </button>
          <div
            @click="goInsuancePortal"
            class="Insurance !curson-point w-[239px] h-[60px]  bg-[#ffffff] border border-[#477577] text-[#477577] py-3 !rounded-div  transition-colors duration-200 rounded-[30px] mb-5 mt-5"
          >
            <span>Return to Insurance</span><br>
            <span> Payment Portal</span>
          </div>
        </div>
      </div>
      <div class="mt-8 text-center">
        <img :src="bottomlog" alt="GOPATH Diagnostics" class="mx-auto w-30" />
      </div>
    </div>
  </template>
        <script lang="ts" setup>
  import { ref,onMounted,watch } from "vue";
  import { Check } from "@element-plus/icons-vue";
  import log from "@/assets/img/red-uti-logo.png";
  import bottomlog from "@/assets/img/green-uti-logo.png";
  import bottleImg from "@/assets/img/uti-bottle.png";
  import star from "@/assets/img/star.png";
  import compony from "@/assets/img/insurance-compony.png";
  import Header from "@/views/components/insurance-header.vue";
  import { storeToRefs } from 'pinia';
  import { useUtiStore } from '@/store/tui'
  import { useFileStore } from '@/store/file'
  import { postInsuanceResponse } from "@/api/index";
  import { ElMessage } from "element-plus";
  const store = useUtiStore()
  const {productName, paymentInfo, orderbackLink} = storeToRefs(store)
  import { useRouter,useRoute } from 'vue-router';


  const router = useRouter();
  const route = useRoute();
  const selectedOption = ref("insurance");
  const insuranceProvider = ref('')
  const url = ref('')
  onMounted(()=>{
    if(route.query && route.query.back_url ){
      console.log('route.query', route.query);
      url.value = route.query.back_url as string

    }else {
      url.value
    }
  })
  watch( () => route.query, async (newParams) => {
    if(newParams && newParams.back_url ){
      console.log('newParams', newParams);
      url.value = newParams.back_url as string

    }else {
      url.value
    }
  }, { immediate: true })
  const handleSubmit = async () => {
    const formData = new FormData();
    formData.append("qInsurerResponse", JSON.stringify(paymentInfo.value.qInsurerResponse));
    const res = await postInsuanceResponse(formData)
    console.log('res', res);
    if(url.value){
      window.location.href =  url.value
      return 
    }
    if(res.status === 200) {
      if(productName.value.trim() === 'MyUTI Complete Home Test Kit') {
        window.location.href =  'https://www.myuti.com/complete-home-test-kit'
      }else if(productName.value.trim() === 'MyUTI Lab Test'){
        window.location.href= "https://www.myuti.com/cart"
      }
    }else {
      return ElMessage.warning(res.statusText)
    }


  };
  
  const goInsuancePortal = () => {
    // if(insuranceProvider.value){
      router.push({
          path: '/patientInfo'
      })
    // }

  };
  
  const goBack = ()=>{
      router.push({
          path: '/home'
      })
  }
  </script>
  <style scoped lang="less">
        @import "@/assets/css/base.css";
  .box {
    font-family: Bicyclette;
  }
  .bg-gray-100 {
    background-color: #f3f4f6;
  }
  .bg-gray-600 {
    background-color: #4b5563 !important;
  }
  button:focus {
    outline: none;
  }
  input[type="radio"] {
    display: none;
  }
  .text-gray-600 {
    color: #6f6f6f;
  }
  .insurance,
  .selfPay {
    line-height: 1.2;
    font-weight: 700;
    font-size: 16px;
  }
  .Insurance {
    text-align: center;
    line-height: 1;
    font-weight: 700;
  }
  input::placeholder {
    color: #000000;
  }
//   :deep(.product_name .el-select__suffix) {
//   display: none;
// }
// :deep(.el-select__wrapper.is-hovering:not(.is-focused) ) {
//   box-shadow: none;
// }

// :deep(.product_name .el-select__wrapper) {
//   border: none;
//   padding-right: 0px;
// }
  </style>
        